<template>
  <div>
    采购付款页面<br/><br/>
    <!-- 条件查询表单 -->
    <div>
      <el-form :inline="true" :model="purOrderVO" class="demo-form-inline">
        <!-- 查询条件 -->
        <el-form-item label="订单编号" >
          <el-input v-model="purOrderVO.ordernum" placeholder="请输入订单编号" widht="20px" ></el-input>
        </el-form-item>
        <el-form-item label="供应商">
          <el-select v-model="purOrderVO.supplier.sid" placeholder="请选择" clearable>
            <el-option v-for="item in suppliers" :key="item.sid" :label="item.sname" :value="item.sid" ></el-option>  
          </el-select>
        </el-form-item>
        <el-form-item label="要求交期">
          <el-date-picker v-model="purOrderVO.startdate" type="date" placeholder="选择开始日期"></el-date-picker>
          &nbsp;
          <el-date-picker v-model="purOrderVO.enddate" type="date" placeholder="选择结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="合计范围" class="priceFormItem" prop="minisummoney">
          <el-input v-model="purOrderVO.minsummoney" class="priceInput" style="width: 70px; margin-right: 20px"/>-
          <el-input v-model="purOrderVO.maxsummoney" class="priceInput" ref="maxsummoney" style="width: 70px; margin-left: 20px"/>
        </el-form-item>
        <el-form-item label="交货方式">
          <el-select v-model="purOrderVO.deliverytype" placeholder="请选择交货方式">
            <el-option label="不限" value=""></el-option>
            <el-option label="送货" value="送货"></el-option>
            <el-option label="邮寄" value="邮寄"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="purOrderVO.orderstatus" placeholder="请选择订单状态">
            <el-option label="不限" value=""></el-option>
            <el-option label="未入库" value="未入库"></el-option>
            <el-option label="待入库" value="待入库"></el-option>
            <el-option label="已入库" value="已入库"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="付款状态">
          <el-select v-model="purOrderVO.paystatus" placeholder="请选择付款状态">
            <el-option label="不限" value=""></el-option>
            <el-option label="未付款" value="未付款"></el-option>
            <el-option label="部分付款" value="部分付款"></el-option>
            <el-option label="全部付款" value="全部付款"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getAllPayButton">查询</el-button>
          <el-button type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
        </el-form-item><br/>
      </el-form>
    </div>

    <!-- 数据展示 -->
    <div>
      <el-table :data="pageBean.beanList" style="widtindexh: 100%" :filter-method="filterHandler" :default-sort = "{prop: 'ordernum', order: 'descending'}">
        <el-table-column fixed type="index" label="序号" width="55" :index="Nindex"></el-table-column>
        <el-table-column fixed prop="ordernum" label="订单编号" width="170" sortable></el-table-column>
        <el-table-column fixed prop="supplier.sname" label="供应商名称" width="190"></el-table-column>
        <el-table-column prop="orderdate" label="订货日期" width="120"></el-table-column>
        <el-table-column prop="demanddelivery" label="要求交期" width="120"></el-table-column>
        <el-table-column prop="summoney" label="合计" width="120"></el-table-column>
        <el-table-column prop="deliverytype" label="交货方式" width="140"></el-table-column>
        <el-table-column prop="orderstatus" label="订单状态" width="100"
           :filters="[{ text: '未入库', value: '未入库' }, { text: '待入库', value: '待入库' },{ text: '已入库', value: '已入库' }]" :filter-method="filterOrderstatus" filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag :type="scope.row.orderstatus === '已入库' ? 'success' : scope.row.orderstatus === '待入库' ? 'primary' : 'danger'" disable-transitions>{{scope.row.orderstatus}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="paystatus" label="付款状态" width="100"
          :filters="[{ text: '未付款', value: '未付款' }, { text: '部分付款', value: '部分付款' },{ text: '全部付款', value: '全部付款' }]" :filter-method="filterPaystatus" filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag :type="scope.row.paystatus === '全部付款' ? 'success' : scope.row.paystatus === '部分付款' ? 'primary' : 'danger'" disable-transitions>{{scope.row.paystatus}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="notes" label="备注" width="120" show-overflow-tooltip></el-table-column> 
        <el-table-column prop="createdate" label="创建时间" width="150"></el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="primary" plain @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <!-- <el-button type="primary" plain @click="orderDetail(scope.$index, scope.row)">详情</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 编辑采购付款模态框，弹出层 -->
    <el-dialog :title="dialogFormTitle" :visible.sync="dialogFormVisible" @close="closeDialog">
      <!-- 采购订单详情 -->
      <el-form :rules="rules" :model="purPay" ref="purPay"  label-width="80px"  :inline="true" class=“demo-form-inline v-if="dialogFormTitle=='编辑采购付款'">
        <!-- 自动生成订单号，并传入到数据库中 -->
        <el-form-item label="订单编号" class="search-param-label"> 
          <el-input v-model="purPay.ordernum"  clearable disabled class="search-param-item"></el-input>
        </el-form-item>
        <el-form-item label="供应商">
          <el-select v-model="purPay.supplier.sid" filterable placeholder="请选择" clearable disabled>
            <el-option v-for="item in suppliers" :key="item.sid" :label="item.sname" :value="item.sid" ></el-option>  
          </el-select>
        </el-form-item>
        <el-form-item label="订货日期" >
          <el-date-picker v-model="purPay.orderdate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" disabled ></el-date-picker><!--:picker-options="pickerOptionsStart"-->
        </el-form-item>
        <el-form-item label="要求交期" >
          <el-date-picker v-model="purPay.demanddelivery" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"  disabled></el-date-picker><!--:picker-options="pickerOptionsEnd"-->
        </el-form-item>
        <el-form-item label="合计(元)" class="search-param-label" prop="summoney">
          <!-- 根据单价、数量、税率计算合计金额 -->
          <el-input v-model="summoney" clearable  disabled class="search-param-item" />
        </el-form-item>
        <el-form-item label="交货方式" prop="deliverytype">
          <el-radio-group v-model="purPay.deliverytype" disabled>
            <el-radio label="送货"></el-radio>
            <el-radio label="邮寄"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="notes" >
          <el-input type="textarea" v-model="purPay.notes" disabled></el-input>
        </el-form-item>
        <el-form-item label="商品"  >
          <el-select v-model="purPay.purGoods.gid" filterable placeholder="请选择商品" clearable disabled >
            <el-option v-for="item in purGoodss" :key="item.gid" :label="item.gname" :value="item.gid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单位" >
          <el-select v-model="purPay.productUnit" placeholder="请选择单位" disabled> 
            <el-option label="瓶" value="瓶"></el-option>
            <el-option label="袋" value="袋"></el-option>
            <el-option label="箱" value="箱"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单价(元)" >
          <el-input v-model.number="perprice" v-model="purPay.perprice" disabled></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="amount" @keyup.native="ceshi(this)" >
          <el-input v-model.number="amount" v-model="purPay.amount" disabled></el-input>
        </el-form-item>
        <el-form-item label="税率(%)" >
          <el-input v-model="purPay.taxrate" disabled></el-input>
        </el-form-item>
        <el-form-item label="价税合计" prop="taxrate" >
          <el-input v-model="summoney" clearable  disabled class="search-param-item" />
        </el-form-item>
        <el-form-item label="已付款项" prop="paid">
          <el-input v-model.number="paid" v-model="purPay.paid" ></el-input>
        </el-form-item>
        <el-form-item label="未付款项" >
          <el-input  v-model="unpaid" clearable  readonly class="search-param-item"></el-input>
        </el-form-item>
        <el-form-item label="付款日期" prop="paydate">
          <el-date-picker v-model="purPay.paydate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"  ></el-date-picker>
        </el-form-item>
        <el-form-item label="付款方式" prop="paytype">
          <el-select v-model="purPay.paytype" placeholder="请选择" > 
            <el-option label="现金" value="现金"></el-option>
            <el-option label="银行转账" value="银行转账"></el-option>
            <el-option label="电子支付" value="电子支付"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="付款状态" prop="paystatus">
          <el-radio-group v-model="purPay.paystatus" >
            <el-radio label="未付款"></el-radio>
            <el-radio label="部分付款"></el-radio>
            <el-radio label="全部付款"></el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="modifyPay('purPay')">确 定</el-button>
        <!-- <el-button type="primary" @click="addOrder(generateOrderNumber)">确 定</el-button> -->
      </div>
    </el-dialog>

    <!-- 分页控件 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[3, 5, 7]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageBean.totalRecord">
      </el-pagination>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    //校验单价
    const twoPoint = (rule, value, callback) => {
      if(/^\d+\.?\d{0,2}$/.test(value)){
        if(value.indexOf('.')=='-1'&&value.length>1&&value.slice(0,1)=='0'){
          callback(new Error("最多包含两位小数的正数且不能为以0开头的正整数"));
        }
      }else{
        callback(new Error("最多包含两位小数的正数且不能为以0开头的正整数"));
      }
    };
    return {
      //定义验证规则
      rules: {  
        paydate: [{required: true, message: '请输入订货日期', trigger: 'blur'}],
        paytype:[{required: true, message: '请输入付款方式', trigger: 'blur' }],
        paystatus:[{required: true,message: '请选择付款状态', trigger: 'blur'}],
        paid:[
          {required: true, message: "请输入已付款金额", trigger: "blur,change"},
          { min: 1, max: 6, message: '长度在 1 到 6 个字符', trigger: 'blur,change' },
          { validator: twoPoint, message: '最多包含两位小数的正数且不能为以0开头的正整数', trigger: 'blur' }
          ],
      },
      
      dialogFormTitle:"",
      sample: {},
      pageBean: [],
      pageIndex: 1,
      pageSize: 5,
      purOrderVO: {supplier:{sid:null},purGoods:{gid:null}},
      suppliers:[],
      purPay:{ supplier:{sid:null}, purGoods:{gid:null}},
      purGoodss:[{gid:null,perprice:null,productUnit:null}],
      perprice: '', 
      amount: '', 
      dialogFormVisible: false,
      
      //pages: ""
    };
  },
  mounted() {
    this.getAllPay();
    this.getAllSupplier();
    this.getAllPurGoods();
  },
  computed:{
    //计算合价
    summoney() {
      if (this.purPay.perprice === '' && this.purPay.amount === '' ) {
        return 0
      } else {
        return Number(this.purPay.perprice) * Number(this.purPay.amount) * Number(this.purPay.taxrate*0.01+1.00)
      }
    },
    unpaid(){
        if(this.purPay.paid ===''){
          return this.summoney;
        }else{
          return Number(this.summoney) - Number(this.purPay.paid)
        }
      }
  },
  methods: {
  
    //校验正整数
    ceshi(val){
        this.purPay.amount = this.purPay.amount.replace(/\D/g, '');
		    if(this.purPay.amount ==0){
			      this.purPay.amount = '';
		   }
    },

    //表格区分付款状态
      filterPaystatus(value, row) {
          return row.orderstatus === value;
      },
    
    //表格区分入库状态
      filterOrderstatus(value, row) {
          return row.orderstatus === value;
      },
      //表格下拉箭头筛选已入库和未入库
      filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },

    

    //模态框关闭执行
    closeDialog() {
      //清空数据
      this.purPay = { supplier:{sid:null}, purGoods:{gid:null}};
      //清空前端验证提示
    },

    //条件查询操作
    getAllPayButton() {
      this.pageIndex = 1;
      this.pageSize = 5;
      this.getAllPay();
    },

    //重置按钮
    reset() {
      this.purOrderVO={supplier:{sid:null}};
      this.getAllPay();
    },

    //编辑采购付款信息
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      this.dialogFormTitle = "编辑采购付款";
      //浅拷贝，将row行的数据拷贝到smapleModify中
      this.purPay = { ...row };
    },

     //编辑采购付款单
    modifyPay(formName) {
      console.log("编辑pay" + JSON.stringify(this.purPay));
      //参考elementui中表单-->表单验证的相关代码
      this.$refs[formName].validate((valid) => {
          //如果为真，验证通过，向后端发请求
        if (valid) {
          
          this.$axios.post("/purpay/modifyPayList", this.purPay).then((resp) => {
          this.dialogFormVisible = false;
          this.$message("编辑成功");
          this.getAllPay();
          });
        } else {
          this.$message("前端验证失败");
          return false;
        }
      });
      this.dialogFormVisible = false;
          this.$axios.post("/purpay/modifyPayList", this.purPay).then((resp) => {
              if(resp.data.code==200){
                
                alert("编辑成功")
                this.getAllPay();
              }else {
                  this.$message(JSON.stringify(resp.data.msg))
              }
          });
    },

    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    //条件查询订单
    onSubmit() {
      this.pageIndex = 1;
      this.getAllPay();
    },

    //查询所有采购付款
    getAllPay() {
      this.$axios.post("/purpay/getPayList/" + this.pageIndex + "/" + this.pageSize,this.purOrderVO)
        .then((resp) => {
          if(resp.data.code==200){
            this.pageBean = resp.data.data;
          }
        });
    },
    //查询所有商品
     getAllPurGoods() {
      this.$axios.get("/purgoods/findAll").then((resp) => {
        this.purGoodss = resp.data.data;
      });
    },
    //查询所有供应商
    getAllSupplier() {
      this.$axios.get("/supplier/findAll").then((resp) => {
        this.suppliers = resp.data.data;
      });
    },
    
    //分页，连续的序号
    Nindex(index) {
      // 当前页数 - 1 * 每页数据条数 + 1
      const pageIndex = this.pageIndex // 当前页码
      const pageSize = this.pageSize // 每页条数
      return index + 1 + (pageIndex - 1) * pageSize
    },
    //每页显示几条数据
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAllPay();
    },

    //显示第几页
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getAllPay();
    },
  },
};
</script>

<style>

</style>